<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  <style>
    
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .box {
      height: 420px;
      width: 992px;
      border: 1px solid #000;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
    }
    
    ul {
      width: 500%;
      position: absolute;
      left: 0;
    }
    
    .list {
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
    
    .list i {
      float: left;
      height: 24px;
      width: 34px;
      background-color: #a9a9a7;
      font-style: normal;
      text-align: center;
      margin-right: 8px;
      color: #fff;
      cursor: pointer;
    }
    
    .list i.current {
      background-color: #fff;
      color: #000;
    }
    
    .arrow {
      position: absolute;
      width: 100%;
      top: 50%;
      margin-top: -35px;
    }
    
    .left, .right {
      width: 40px;
      height: 70px;
      position: absolute;
      cursor: pointer;
    }

    .left {
      background: url("images/arr.png") no-repeat -83px 0px;
    }
    
    .right {
      right: 0;
      background: url("images/arr.png") no-repeat -128px 0px;
    }
  
  </style>

</head>
<body>

<div class="box" id="box">
  <ul id="imglist">
    <li><img src="images/1.jpg" alt=""></li>
    <li><img src="images/2.jpg" alt=""></li>
    <li><img src="images/3.jpg" alt=""></li>
    <li><img src="images/4.jpg" alt=""></li>
    <li><img src="images/5.jpg" alt=""></li>
  </ul>
  <div class="list" id="list">
    <i class="current">1</i>
    <i>2</i>
    <i>3</i>
    <i>4</i>
    <i>5</i>
  </div>
  <div class="arrow" id="arrow">
    <div class="left" id="left"></div>
    <div class="right" id="right"></div>
  </div>
</div>

</body>
</html>

<script src="jq/jquery-1.12.2.js"></script>
<script>

  $(function () {
    var index = 0;
    $("#list i").on("mouseover", function () {
      index = $(this).index();
      $(this).addClass("current").siblings().removeClass("current");
      $("#imglist li").eq(index).fadeIn().siblings().fadeOut();
    });
    
    $("#left").on("click", function () {
      if (index == 0) {
        index = 4;
      } else {
        index--;
      }
      $("#list i").eq(index).addClass("current").siblings().removeClass("current");
      $("#imglist li").eq(index).fadeIn().siblings().fadeOut();
    });

    $("#right").on("click", function () {
      moveRight();
    });
    
    function moveRight() {
      if (index == 4) {
        index = 0;
      } else {
        index++;
      }
      $("#list i").eq(index).addClass("current").siblings().removeClass("current");
      $("#imglist li").eq(index).fadeIn().siblings().fadeOut();
    }
    
    $("#box").on("mouseover", function () {
      $("#left").css("background-position","0px, 0px");
      $("#right").css("background-position","-42px, 0px");
      clearInterval(timer);
    });
    $("#box").on("mouseout", function () {
      $("#left").css("background-position","-83px, 0px");
      $("#right").css("background-position","-128px, 0px");
      timer = setInterval(moveRight, 1800);
    });
    
    var timer = setInterval(moveRight, 1800);
  });

</script>